<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国年进度</title>
    <style>
        :root {
            --side: 80vh;
        }

        body {
            background: pink;
        }

        #container{
            height: var(--side);
            width: var(--side);
            display:flex;
            margin: auto;
            position: relative;
        }

        .left{
            width: calc(var(--side)/2);
            height: var(--side);
            position: relative;
            overflow: hidden;
        }

        #leftCircle{
            width: calc(var(--side) - 40px);
            height: calc(var(--side) - 40px);
            border: 20px solid white;
            position: absolute;
            border-radius: 50%;
            left: 0;
            top: 0;
            border-bottom: 20px solid orange;
            border-left: 20px solid orange;
            transform: rotate(-135deg);
        }

        .right {
            width: calc(var(--side)/2);
            height: var(--side);
            position: relative;
            overflow: hidden;
        }

        #rightCircle {
            width: calc(var(--side) - 40px);
            height: calc(var(--side) - 40px);
            border-radius: 50%;
            border: 20px solid white;
            position: absolute;
            border-top: 20px solid orange;
            border-right: 20px solid orange;
            right: 0;
            top: 0;
            transform: rotate(-135deg);
        }

        #pastPart{
            position: absolute;
            width: 180px;
            height: 45px;
            left: calc((var(--side) - 180px)/2);
            top: 40%;
        }
    </style>
</head>

<body>
    <div id='container'>
        <div class="left">
            <div id="leftCircle"></div>
        </div>
        <div class="right">
            <div id="rightCircle"></div>
        </div>
        <h1 id="pastPart"></h1>
    </div>
    <script src="node_modules/lunar-javascript/lunar.js"></script>
    <script>
        const leftCircle = document.getElementById("leftCircle")
        const rightCircle = document.getElementById("rightCircle")
        const pastPart = document.getElementById("pastPart")

        let lunarYear = Lunar.fromDate(new Date()).getYear()
        let startTime = solarToDate(Lunar.fromYmd(lunarYear,1,1).getSolar()).getTime()
        let endTime = solarToDate(Lunar.fromYmd(lunarYear+1,1,1).getSolar()).getTime()
        let timeLong = endTime-startTime;

        move()
        setInterval(move,1000)

        function move() {
            let nowTime = new Date().getTime();
            let progress = (nowTime-startTime)/timeLong;
            if (progress < 0.5) {
                rightCircle.style.transform = `rotate(${progress*360-135}deg)`
                leftCircle.style.transform = 'rotate(-135deg)'
            } else {
                rightCircle.style.transform = 'rotate(45deg)'
                leftCircle.style.transform = `rotate(${progress*360-315}deg)`
            }
            pastPart.innerHTML = (progress*100).toFixed(5)  + '%';
        }

        function solarToDate(solar){
            return new Date(solar.getYear(),solar.getMonth()-1,solar.getDay())
        }
    </script>
</body>

</html>